<template>
	<div class="main">
		<div class="main-menu drag">
			<template v-for="item in menuList">
				<div :class="['item no-drag', { 'active': menuIndex === item.value }]" @click="handleBtn('menu', item)">
					{{ item.label }}
				</div>
			</template>
		</div>
		<div class="main-content">
			<router-view v-slot="{ Component }">
				<div class="title drag">
					<span>
						{{ menuList[menuIndex].label }}-
						用户id：{{ userInfo?.userId }}
					</span>
					<Header isShowTop isShowMin isShowMax :closeType="1"></Header>
				</div>
				<div class="content">
					<keep-alive include="home">
						<component :is="Component" ref="componentRef"></component>
					</keep-alive>
				</div>
			</router-view>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Header from '../components/Header.vue'
const router = useRouter()
const menuIndex = ref(0)
const userInfo = ref(); // 用户信息
const menuList = ref([
	{ value: 0, label: '首页', path: '/home' },
	{ value: 1, label: '关于我们', path: '/about' },
	{ value: 2, label: '联系我们', path: '/contact' },
])

/**
 * 按钮点击事件
 * @param {String} type 按钮类型
 * @param {Object} values 按钮值
*/
const handleBtn = (type: string, values: any) => {
	switch (type) {
		case 'menu':
			menuIndex.value = values.value
			router.push(values.path)
			break
		default:
			break
	}
}
onMounted(async () => {
	// 初始化菜单索引
	menuIndex.value = menuList.value.findIndex(item => item.path === router.currentRoute.value.path)
	// 获取用户信息-传统send方法
	// window.ipcRenderer.send('getData', 'userInfo')
	// window.ipcRenderer.on('getDataCallBack', (_e, data) => {
	// 	userInfo.value = data
	// })
	// 获取用户信息-invoke方法
	window.ipcRenderer.invoke('getData', 'userInfo').then(res => {
		userInfo.value = res;
		console.log('用户信息===', res)
	});
	window.ipcRenderer.invoke('getData', 'age').then(res => {
		console.log('年龄===', res)
	});
	window.ipcRenderer.on('logoutCallBack', () => {
		router.push('/login')
	})
})
</script>

<style lang="scss" scoped>
.main {
	display: flex; // 添加flex布局
	height: 100vh; // 确保全高

	&-menu {
		width: 200px;
		height: 100vh;
		background-color: #666;
		padding: 10px;
		display: flex;
		flex-direction: column;
		gap: 10px;

		.item {
			cursor: pointer;
			padding: 10px;
			border-radius: 4px;
			color: white;

			&.active {
				background-color: #999;
			}

			&:hover {
				background-color: #999;
			}
		}
	}

	&-content {
		flex: 1;

		.title {
			height: 50px;
			display: flex;
			align-items: center;
			padding: 0 10px;
			background-color: white;
			display: flex;
			color: #333;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ddd;
		}

		.content {
			padding: 10px;
			height: calc(100% - 50px);
		}
	}
}
</style>
